<template>
  <div style="display: flex">
        <!-- <category-panel title="商品分类" icon="tree" request="jdCategory" @delClick="delClick" @notClick="notClick"
         @nodeClick="nodeClick"  isshow='false'></category-panel> -->
       <splitpanel title="商品分类" icon="company" request="jdCategory" :department="department" :default-props="defaultProps"
        @handleNodeClick="handleNodeClick" :stockshow='true'/>
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div style="width: 150px;display: flex;align-items: center;margin-left: 10px;">
            <svg-icon class="primary" :icon-class="$route.meta.icon"/>
            <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
              <div class="report_header_query">
                <el-select v-model="query.isMarketable" placeholder="上架状态">
                  <el-option label="未上架" :value=0></el-option>
                  <el-option label="已上架" :value=1></el-option>
                </el-select>
              </div>
              <div class="report_header_query">
                <el-input
                  prefix-icon="el-icon-search"
                  placeholder="商品名称"
                  v-model="query.title"
                ></el-input>
              </div>
            </div>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary" @click="queryClick">查询</el-button>
            <el-dropdown trigger="click" @command="handleCommand" v-permission="['product.add']">
              <el-button style="margin-left: 10px;margin-top: 7px;" size="small" type="primary">
                批量操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  command="combine">批量上架</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <div class="pd10">
        <el-table
          :data="productData"
          border
          stripe
          :height="curHeight"
          @sort-change="sortChange"
          ref="table"
          v-loadMore="[payLoads,'product-list']"
          @select = "handleSelect"
          @select-all="handleSelectAll"
           @selection-change="handleSelectionChange"
        >
        <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="货号/条码" align="left" width="120" prop="sn" sortable="custom"></el-table-column>
          <el-table-column
            label="缩略图"
            width="80">
            <template slot-scope="{row}">
              <img :src="row.thumbnail" style="width: 100%;"></img>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="left" min-width="250" prop="name" sortable="custom">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.subType">{{scope.row.subType | watchSubType}}</el-tag>
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" width="60" align="center" prop="unit"></el-table-column>
          <el-table-column
            label="市场价"
            width="100"
            align="center"
            prop="marketPrice"
            sortable="custom"
          ></el-table-column>
          <el-table-column label="销售价" width="100" align="center" prop="price" sortable="custom"></el-table-column>
          <el-table-column label="结算价" width="100" align="center" prop="cost" sortable="custom"></el-table-column>

          <el-table-column label="状态" width="80" align="center" prop="isShelf">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isMarketable==true" type="primary">
                <span>{{scope.row.isMarketable | watchType}}</span>
              </el-tag>
               <el-button v-else type="primary" size="mini" round @click="putshelf(scope.row)">上架</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="70" align="center">
            <template slot-scope="scope">
              <div v-show="deleted == false">
                <el-tooltip
                  v-permission="['product.edit']"
                  class="item"
                  effect="dark"
                  content="查看详情"
                  placement="top-start"
                >
                  <a @click="editClick(scope.row)">
                    <i style="color: #409EFF" class="el-icon-document"></i>
                  </a>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="loadProduct"
        ></pagination>
      </el-footer>
    </el-container>
    <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible">
      <el-table :data="selectList">
        <el-table-column
            label="主展示款"
            width="100"
            align="center"
            v-if="dialogType == 'combine'">
            <template slot-scope="{row}">
              <el-radio v-model="isListSku" :label="row.skuId" @change="radioChange"></el-radio>
            </template>
          </el-table-column>
        <el-table-column
            label="缩略图"
            width="80">
            <template slot-scope="{row}">
              <img :src="row.thumbnail" style="width: 100%;"/>
            </template>
          </el-table-column>
        <el-table-column property="name" label="商品名称" min-width="200"></el-table-column>
        <el-table-column label="主规格" min-width="120">
          <template slot-scope="{row}">
            <el-input v-model="row.spec1" />
          </template>
        </el-table-column>
        <el-table-column label="颜色" min-width="80">
          <template slot-scope="{row}">
            <el-input v-model="row.spec2"/>
          </template>
        </el-table-column>
        <el-table-column label="移除" width="100">
          <template slot-scope="scope">
            <el-tooltip
                  v-permission="['product.edit']"
                  class="item"
                  effect="dark"
                  content="移除"
                  placement="top-start"
                >
                  <a @click="handleDelete(scope.row)">
                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                  </a>
                </el-tooltip>
          </template>
    </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <CategoryDialog ref="categoryDialog" request="productCategory" @confirm="categoryDialogConfirm" />

  </div>
</template>
<script>
  import CategoryDialog from '@/components/CategoryDialog'
  import splitpanel from '@/components/SplitPanel'
  import store from '@/store'
  import permission from "@/directive/permission/index.js"; // 权限判断指令
  import {list,marketJDProduct,jdCategory} from "@/api/jdproduct";
  // import {list, del, jdProductShelf,jdProductCompose} from "@/api/marketProduct";
  import {list as supplierList} from "@/api/supplier";
  import utils from "../../utils/utils.js";
  import {EventBus} from "@/api/eventBus";
  import Pagination from "@/components/Pagination";
  import CategoryPanel from "@/components/CategoryPanel";
  import loadMore from "@/utils/loadMore.js";
  import {list as tagList} from '@/api/tag'
  import { getInfo, list as sysMchList } from '@/api/sysMch'
  export default {
    name: "jdProduct-list",
    directives: {permission, loadMore},
    data() {
      return {
        productCategoryId:"",
        nerarray:[],
         defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        department:[],
        tags:[], //标签列表
        suppliers:[],//供应商列表
        value: "",
        productData: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        queryType: true,
        mchType:'',
        mchIdOptions:[],
        query: {
          tagId:'',
          title: "",
          sn: "",
          supplierId:145,
          isMarketable:'',
        },
        keyword: {
          tagId:'',
          title: "",
          sn: "",
          supplierId:145,
        },
        curHeight: null,
        excelData: [],

        deleted: false,
        direction: "",
        sortField: "",
        payLoads: "",
        supplierLoading:"",
        productlistPermission:{
            orders:false,
        },
        selectSkuIds:[],
        selectList:[],
        dialogTableVisible:false,
        dialogTitle:"",
        dialogType:"",
        isListSku:"", //主展示款的skuId
        exportClick: false,
        productCategory:""
      };
    },
    components: {Pagination, CategoryPanel,splitpanel,CategoryDialog},
    created() {
      this.loadTree()
      this.loadMch()
      this.loadSysmch('')
      this.loadTag()
      var _this = this;
      this.loadProduct();
      EventBus.$on("product-add", res => {
        // 监听新增完毕
        // 更新列表数组
        _this.productData.splice(0, 0, res);
      });
      EventBus.$on("product-edit", res => {
        // 监听新增完毕
        // 更新列表数组
        for (var i = 0; i < _this.productData.length; i++) {
          if (_this.productData[i].id == res.id) {
            this.$set(this.productData, i, res);
          }
        }
      });

      let  menusData = store.getters && store.getters.menus
      this.productlistPermission.orders = menusData.includes("product.orders")
    },
    mounted() {
      this.comeIn();
      this.beforeMount();
    },
    filters: {
      watchSubType(val) {
        if (val == 0) {
          return '产品'
        } else if (val == 1) {
          return '套餐'
        } else if (val == 2) {
          return '水票'
        }
      },
      watchType(val) {
        if (val == true) {
          return "已上架";
        } else{
          return "未添加";
        }
      },
      watchPublished(val) {
        if (val == 0) {
          return "已创建";
        } else if (val == 1) {
          return "申请中";
        } else if (val == 2) {
          return "已上架";
        } else if (val == 3) {
          return "已下架";
        }
      },
      watchShare(val) {
        if (!val) {
          return "已禁用";
        } else {
          return "已启用";
        }
      }
    },
    activated() {
      this.payLoads = new Date().getTime();
    },
    methods: {
      handleNodeClick(data) {
        console.log('444444444');
        console.log(data);
        this.productCategory=data.id
        this.loadProduct();
      },
       loadTree() {
        const _this = this
        jdCategory().then(response => {
          console.log(response)
          if (response.type == 'success') {
            let allCategory = [{
              id: '',
              name: '全部',
              childrens: response.data
            }]
            _this.department = allCategory
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }
        }).catch(error => {})
      },
      categoryDialogConfirm(val) {
        this.productCategoryId = val.id
        let params = new URLSearchParams();

        params.append("productCategoryId", this.productCategoryId);
        marketJDProduct(this.nerarray,params).then(res=>{
          if(res.type='success'){
            this.$message("上架成功")
            this.loadProduct();
          }
        })

    },
      putshelf(data){
        this.$refs.categoryDialog.show()
        this.nerarray=[]
        this.nerarray.push(data.id)
        console.log(this.nerarray);
      },
      handleSelectionChange(data){
        console.log(data);
         this.nerarray=[]
        data.forEach(item=>{
          this.nerarray.push(item.id)
        })
        console.log(this.nerarray);
      },
        loadSysmch(query){
          sysMchList({ name: query }).then(res => {
            this.mchIdOptions = res.data.data.filter(val => { return val.mchType === 3||val.mchType === 1 })
          }).catch(err => { console.log(err) })
        },
        changeSysMch(){
          this.loadProduct()
        },
        querySysmch(query){
          this.loadSysmch(query)
        },
        loadMch(){
          getInfo().then(res=>{
            this.mchType=res.data.mchType
          })
        },
        //弹窗的单选事件
        radioChange(){
          console.info("isListSku--"+this.isListSku)
        },
        //组合商品的弹窗确定事件
        dialogConfirm(){
         if(this.selectSkuIds.length > 0){
           if(this.dialogType == "combine"){
             if(this.selectSkuIds.length > 1){
               let off = true
               let productName = ""
               this.selectList.map(item=>{
                 if(utils.isNull(item.spec1)){
                   productName = item.name
                   off = false
                 }
               })
               if(off){
                  console.info("是时候发送请求了")
                  let data =[]
                  this.selectList.map(item=>{
                    let dataItem = {}
                    dataItem.isList = item.skuId == this.isListSku?1:0
                    dataItem.sku = item.skuId
                    dataItem.spec1 = item.spec1
                    dataItem.spec2 = utils.isNull(item.spec2)?"":item.spec2
                    data.push(dataItem)
                  })
                  console.info(JSON.stringify(data))
                jdProductCompose(data).then(res=>{
                    console.log(res);
                    this.selectSkuIds = []
                    this.selectList = []
                    this.dialogTableVisible = false
                    this.loadProduct()
                }).catch(error => {
                    console.log("error!!--"+error);
                });
               }else{
                 this.$message.error(productName+'的主规格不能为空');
               }
             }else{
               this.$message.error('组合至少要两件商品');
             }
           }else if(this.dialogType = "addProductToSelf"){
             console.info("我要添加商品的")
             jdProductShelf(this.selectSkuIds).then(res=>{
                    console.log(res);
                    this.selectSkuIds = []
                    this.selectList = []
                    this.dialogTableVisible = false
                    this.loadProduct()
                }).catch(error => {
                    console.log("error!!");
                });
           }
         }else{
           this.$message.error('请先选择商品');
           this.dialogTableVisible = false
         }
        },
        //多SKU组合成商品
        combine(){
          if(this.selectList.length > 0){
            this.dialogTableVisible = true
            this.dialogTitle = "组合商品"
            this.dialogType = "combine"
          }else{
            this.$message.error('请勾选要组合的商品');
          }
        },
        //添加商品到商品档案
        addProductToSelf(){
          if(this.selectList.length > 0){
            this.dialogTableVisible = true
            this.dialogTitle = "添加到商品档案"
            this.dialogType = "addProductToSelf"
          }else{
            this.$message.error('请勾选要添加的商品');
          }
        },
        //弹窗中商品的移除事件
        handleDelete(row){
            let index = this.selectSkuIds.indexOf(row.skuId);
            if (index > -1) {
            this.selectSkuIds.splice(index, 1);
            }
            if(this.selectList.length > 0){
              let selectListIndex = -1
              this.selectList.map((item1,index1)=>{
                if(row.skuId == item1.skuId){
                  selectListIndex = index1
                }
              })
              if (selectListIndex > -1) {
                this.selectList.splice(selectListIndex, 1);
              }
            }
            this.toggleSelection()
        },
        //商品的全选选择事件
        handleSelectAll(val){
            if(val.length > 0){
               val.map(item=>{
                    let index = this.selectSkuIds.indexOf(item.skuId);
                    if (index == -1) {
                    this.selectSkuIds.push(item.skuId);
                    }
                    if(this.selectList.length > 0){
                      let off = true
                      this.selectList.map((item1,index1)=>{
                        if(item.skuId == item1.skuId){
                          off = false
                        }
                      })
                      if (off) {
                        this.selectList.push(item)
                      }
                    }else{
                      this.selectList.push(item)
                    }
               })
            }else{
                if(this.productData.length > 0){
                    this.productData.map(item=>{
                        let index = this.selectSkuIds.indexOf(item.skuId);
                        if (index > -1) {
                        this.selectSkuIds.splice(index, 1);
                        }
                        if(this.selectList.length > 0){
                          let selectListIndex = -1
                          this.selectList.map((item1,index1)=>{
                            if(item.skuId == item1.skuId){
                              selectListIndex = index1
                            }
                          })
                          if (selectListIndex > -1) {
                            this.selectList.splice(selectListIndex, 1);
                          }
                        }
                    })
                }
            }
            // console.info("this.selectSkuIds--"+this.selectSkuIds)
            // console.info("this.selectSkuIds--"+this.selectSkuIds.length)
            // console.info("this.selectList--"+this.selectList.length)
            // let checkList = []
            //   this.selectList.map(item=>{
            //     checkList.push(item.skuId)
            //   })
            // console.info("this.selectList--"+checkList)
        },
        //单个商品的选择事件
        handleSelect(val,row){
            console.info("row.skuId--"+row.skuId)
            if(val.length > 0){
                let off = false
                val.map(item=>{
                    // console.info("val--"+item.skuId)
                   if(row.skuId == item.skuId){
                       off = true
                   }
               })
               if(off){
                  this.selectSkuIds.push(row.skuId)
                  this.selectList.push(row)
               }else{
                   let index = this.selectSkuIds.indexOf(row.skuId);
                    if (index > -1) {
                    this.selectSkuIds.splice(index, 1);
                    }
                    if(this.selectList.length > 0){
                          let selectListIndex = -1
                          this.selectList.map((item1,index1)=>{
                            if(row.skuId == item1.skuId){
                              selectListIndex = index1
                            }
                          })
                          if (selectListIndex > -1) {
                            this.selectList.splice(selectListIndex, 1);
                          }
                        }
               }
            }else{
                let index = this.selectSkuIds.indexOf(row.skuId);
                    if (index > -1) {
                    this.selectSkuIds.splice(index, 1);
                    }
                    if(this.selectList.length > 0){
                          let selectListIndex = -1
                          this.selectList.map((item1,index1)=>{
                            if(row.skuId == item1.skuId){
                              selectListIndex = index1
                            }
                          })
                          if (selectListIndex > -1) {
                            this.selectList.splice(selectListIndex, 1);
                          }
                        }
            }
        },
        //商品勾选状态变化事件
        toggleSelection() {
            let _this = this
            let selectData = []
            let noMatchData = []

            if(this.productData.length > 0 ){
                this.productData.map((item,index)=>{
                    let index1 = this.selectSkuIds.indexOf(item.skuId);
                    if (index1 > -1) {
                        selectData.push(item)
                    }else{
                        noMatchData.push(item)
                    }
                })
                if(selectData.length > 0){
                    selectData.map(item=>{
                        _this.$refs.table.toggleRowSelection(item,true);
                    })
                }
                if(noMatchData.length > 0){
                    noMatchData.map(item=>{
                        _this.$refs.table.toggleRowSelection(item,false);
                    })
                }
            }
        },
        //查询供应商列表
        loadSupplierList(query){
            let _this = this
            _this.supplierLoading = true
            if(query !== ""){
                let params=new URLSearchParams()
                params.append('name',query)
            supplierList(params).then(res=>{
                console.log(res.data.data);
                this.suppliers=res.data.data
                _this.supplierLoading = false
            }).catch(error => {
                console.log("error!!");
              });
            }

        },
      loadTag(){
        let params=new URLSearchParams()
        params.append('type','3')
        tagList(params).then(res=>{
            this.tags=res.data.data
        })
      },
      beforeMount() {
        var _this = this;
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
              _this.curHeight = h - 266; //减去页面上固定高度height
            } else {
              var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
              _this.curHeight = h - 220; //减去页面上固定高度height
            }
          })();
        };
      },
      comeIn() {
        console.log("222");
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220; //减去页面上固定高度height
      },
      editClick(row) {
        this.$router.push({
          path: '/jdProduct/edit', query: {id: row.id}
        });
      },
      loadProduct() {
        var _this = this;
        let params = new URLSearchParams();
        params.append("pageSize", this.pageSize);
        params.append("pageNum", this.pageNum);
        params.append("productCategory", this.productCategory);
        params.append("isMarketable", this.query.isMarketable);
        params.append("keyword", this.query.title );
        list(params)
          .then(response => {
            _this.productData = response.data.data;
            console.info(_this.productData)
            _this.total = response.data.total;
            //自动勾选已被选择的商品
            // this.$nextTick(() => {
            //   _this.toggleSelection()
            // })
          })
          .catch(error => {
            console.log("error!!");
          });
      },

      chooseClick() {
        this.queryType = !this.queryType;
        if (this.queryType == false) {
          var h =
            document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266; //减去页面上固定高度height
        } else {
          var h =
            document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220; //减去页面上固定高度height
        }
      },
      addClick() {
        this.$router.push({
          path: "/product/add"
        });
      },
      infoClick(row) {
        this.$router.push({
          path: "/product/index",
          query: {id: row.id, goods: row.goodsId}
        });
      },
      deleteProduct(data) {
        console.log(data);
        var _this = this;
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            del(data.id)
              .then(response => {
                console.log(response);
                if (response.type)
                // 更新列表数组
                  _this.productData.forEach(function (item, index) {
                    if (item.id == data.id) {
                      _this.productData.splice(index, 1);
                    }
                  });
              })
              .catch(error => {
                console.log("error!!");
              });
          })
          .catch(() => {
          });
      },
      queryClick() {
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadProduct();
      },
      resetClick() {
        this.value = "";
        this.query.sn = "";
        this.query.title = "";
        this.query.tagId='';
        this.query.supplierId='';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadProduct();
      },
      handleDownload() {
        this.exportClick = true
        this.prepareExcel();
        import("@/vendor/Export2Excel").then(excel => {
          const tHeader = [
            "序号",
            "姓名",
            "电话",
            "备用电话",
            "地址",
            "邮箱",
            "性别",
            "生日",
            "等级",
            "可用余额",
            "冻结余额",
            "金币购物券"
          ];
          const filterVal = [
            "index",
            "name",
            "mobile",
            "phone",
            "areaName",
            "email",
            "gender",
            "birth",
            "vip",
            "balance",
            "freezeBalance",
            "point"
          ];
          const list = this.excelData;
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
            autoWidth: this.autoWidth,
            bookType: this.bookType
          });
          this.exportClick = false
        });

      },
      prepareExcel() {
        var _this = this;
        let params = new URLSearchParams();
        params.append("pageNum", 1);
        params.append("pageSize", 10000);
        params.append("title", _this.keyword.title);
        params.append("sn", _this.keyword.sn);
        params.append("productCategory", _this.productCategory);
        params.append("deleted", _this.deleted);
        list(params)
          .then(response => {
            let ex = {};
            for (var i = 0; i < response.data.data.length; i++) {
              ex = {
                index: i,
                name: response.data.data[i].name,
                mobile: response.data.data[i].mobile,
                phone: response.data.data[i].phone,
                areaName:
                  response.data.data[i].areaName + response.data.data[i].address,
                email: response.data.data[i].email,
                gender: response.data.data[i].gender,
                birth: response.data.data[i].birth,
                vip: response.data.data[i].vip,
                balance: response.data.data[i].balance,
                freezeBalance: response.data.data[i].freezeBalance,
                point: response.data.data[i].point
              };
              _this.excelData.push(ex);
            }
          })
          .catch(error => {
            console.log("error!!");
          });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      notClick() {
        this.productCategory = 0;
        this.deleted = false;
        this.loadProduct();
      },
      delClick() {
        this.deleted = true;
        this.productCategory = "";
        this.loadProduct();
      },
      nodeClick(data) {
        this.deleted = false;
        this.productCategory = data.id;
        this.loadProduct();
      },
      releaseProduct(row) {
        this.$confirm(row.isMarketable ? "确认下架?" : "确认上架", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            updateProduct({
              id: row.id,
              isMarketable: row.isMarketable ? false : true
            })
              .then(response => {
                console.log(response);
                this.$message({
                  message: "设置成功",
                  offset: 120,
                  center: true
                });
                // 更新列表数组
                for (var i = 0; i < this.productData.length; i++) {
                  if (this.productData[i].id == response.data.id) {
                    this.productData[i].isMarketable = response.data.isMarketable;
                  }
                }
              })
              .catch(error => {
                console.log("error!!");
              });
          })
          .catch(() => {
          });
      },
      restoreProduct(row) {
        var _this = this;
        console.log(row);
        this.$confirm("确认恢复?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            updateProduct({id: row.id, deleted: false})
              .then(response => {
                // 更新列表数组
                _this.productData.forEach(function (item, index) {
                  if (item.id == row.id) {
                    _this.productData.splice(index, 1);
                  }
                });
              })
              .catch(error => {
                console.log("error!!");
              });
          })
          .catch(() => {
          });
      },
      // 表格排序
      sortChange(column) {
        console.log(column);
        this.sortField = column.prop;
        if (column.order == "ascending") {
          this.direction = "asc";
        } else {
          this.direction = "desc";
        }
        this.loadProduct();
      },
      ordersIcons(h, {column}) {
        const inReview = "点击下方数字区域可直接更改排序。";
        return h("div", [
          h("span", column.label),
          h(
            "el-tooltip",
            {
              props: {
                placement: "top"
              }
            },
            [
              h(
                "div",
                {
                  slot: "content",
                  style: {
                    width: "200px",
                    whiteSpace: "normal",
                    "margin-bottom": "10px"
                  }
                },
                inReview
              ),
              h("i", {
                class: "el-icon-question",
                style: "color:#888888;margin-left:5px;position:absolute"
              })
            ]
          )
        ]);
      },
      bulrOrders(data) {
        console.log(data);
        let _this = this;
        updateProduct({
          id: data.id,
          orders: data.orders,
          isMarketable: data.isMarketable
        })
          .then(response => {
          })
          .catch(error => {
            console.log("error!!");
          });
      },
      handleCommand(data) {
        console.log(data)
        var _this = this
        if (data == 'combine') {
             this.$refs.categoryDialog.show()
        }
      },
     notClick() {
        this.productCategory = 0
        this.deleted = false
      },
      delClick() {
        this.deleted = true
        this.productCategory = ''
      },
      nodeClick(data) {
        this.deleted = false
        this.menuId = data.id
      },
    }
  };
</script>

<style scoped lang="scss">
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #f2f2f2;
  }
  .tags {
    width: 33.33%;
    text-align: left;
    padding-bottom: 5px;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
</style>
